<%--
  Created by IntelliJ IDEA.
  User: john
  Date: 2015/7/12
  Time: 1:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>吃饭</title>
  <%@include file="inc/_header.jsp"%>
  <link rel="stylesheet" href="/css/food.css">
</head>
<body>
<%@include file="inc/_nav.jsp"%>
<br>

<div class="container">
  <div class="pull-right">
  吃饭|<a href="/prj/food/myOrder.do">订单</a>
  </div>

  <div class="row-fluid">
    <div class="btn-group">
      <a href='./food.do?cuisine=${foodQO.cuisine}&price=${foodQO.price}' type="button"  class="btn btn-default <c:if test="${foodQO.store==null}">active</c:if>">全部</a>
      <a href='./food.do?store=1&cuisine=${foodQO.cuisine}&price=${foodQO.price}' type="button" class="btn btn-default <c:if test="${foodQO.store==1}">active</c:if>">旺园</a>
      <a href='./food.do?store=2&cuisine=${foodQO.cuisine}&price=${foodQO.price}' type="button" class="btn btn-default <c:if test="${foodQO.store==2}">active</c:if>">店铺二</a>
    </div>
  </div>
  <div class="row-fluid" style="margin-top: 10px;">
    <div class="btn-group">
      <a href='./food.do?store=${foodQO.store}&price=${foodQO.price}' type="button"  class="btn btn-default <c:if test="${foodQO.cuisine==null}">active</c:if>">全部</a>
      <a href='./food.do?store=${foodQO.store}&&cuisine=1&price=${foodQO.price}' type="button" class="btn btn-default <c:if test="${foodQO.cuisine==1}">active</c:if>">套餐</a>
      <a href='./food.do?store=${foodQO.store}&cuisine=2&price=${foodQO.price}' type="button" class="btn btn-default <c:if test="${foodQO.cuisine==2}">active</c:if>">盖浇饭</a>
    </div>
  </div>

  <div class="row-fluid" style="margin-top: 10px;">
    <div class="btn-group">
    <a href='./food.do?store=${foodQO.store}&&cuisine=${foodQO.cuisine}' type="button"  class="btn btn-default <c:if test="${foodQO.price==null}">active</c:if>">全部</a>
    <a  href='./food.do?store=${foodQO.store}&&cuisine=${foodQO.cuisine}&price=8' type="button" class="btn btn-default  <c:if test="${foodQO.price==8}">active</c:if> ">8元区</a>
    <a href='./food.do?store=${foodQO.store}&&cuisine=${foodQO.cuisine}&price=10' type="button" class="btn btn-default <c:if test="${foodQO.price==10}">active</c:if>">10元区</a>
    <a href='./food.do?store=${foodQO.store}&&cuisine=${foodQO.cuisine}&price=12' type="button" class="btn btn-default <c:if test="${foodQO.price==12}">active</c:if>">12元区</a>
  </div>
  </div>
<br>
  <div class="pic">
    <ul class="thumbnails">
      <% int i = 0;%>
      <c:forEach items="${pager.rows}" var="food">
        <li class="col-md-3 food" style="margin-bottom: 10px;">
          <input class="id" value="${food.id}" type="hidden">
          <table>
            <tr>
              <td colspan="2">
                <div class="imgDiv">
                  <a href="javascript:void (0);" onclick="choose(<%=i++%>)" >
                    <img class="fimg" src="${food.img}"/>
                  </a>
                </div>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="title" >${food.rname}</div>
              </td>
            </tr>
            <tr>
              <td class="price" style="text-align: center;">
                价格:
                 <span style="color:red;font-weight: bold;">
                <span class="money">￥</span><span class="fprice">${food.price}</span>
              </span>
              </td>
              <td>
              </td>
            </tr>
          </table>
        </li>
      </c:forEach>
    </ul>
  </div>
</div>
<div>

  <script>
    function choose(index){
      var food = $(".food")[index];
      var order_img =  $(food).find(".fimg")[0].src;
      var order_title =  $(food).find(".title")[0].innerHTML;
      var order_price =  $(food).find(".fprice")[0].innerHTML;
      var order_food = $(food).find(".id")[0].value;

      $("#order_img").attr("src",order_img);
      $("#order_title").html(order_title);
      $("#order_price").html(order_price);
      $("#order_food").val(order_food);
      $('#order').modal();
    }

    $(function () {
      $("#order_send").on("click", function () {
        var order_food = $("#order_food").val();
        var order_rname = $("#order_rname").val();
        var order_email = $("#order_email").val();

        if($.trim(order_rname).length==0){
          alert("请务必填一下姓名!");
          return;
        }

        var url = "/order/controller.do";
        var data = {
          action: "send",
          food: order_food,
          rname: order_rname,
          email: order_email
        };

        $("#order_send").html("发送中..");
        $.post(url, data, function (json) {
          if (json.success) {
            window.location.href = "/prj/food/myOrder.do";
          } else {
            alert(json.msg);
          }
        }, "json").error(function (e) {
          alert("系统故障");
        }).complete(function () {
          $("#order_send").html("发送订单");
        });
      });
    });


  </script>

  <div class="modal fade" id="order">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">确定订单</h4>
        </div>
        <div class="modal-body">
          <table style="width:100%;">
            <tr>
              <td style="width:40%">
                <div>
                  <p>
                    <img id="order_img" src="" style="width:200px;height: 200px;border-radius: 5px;">
                  </p>
                  <p id="order_title"></p>
                  <p>价格<span id="order_price"></span>元</p>
                </div>
              </td>
              <td style="width:60%;text-align: right;padding-left: 50px;padding-bottom: 50px;">
                <div>
                  <form id="order_form">
                    <input id="order_food" name="food" value="1" type="hidden">
                    <table>
                      <tr>
                        <td>
                          姓名:
                        </td>
                        <td>
                          <input id="order_rname" name="Rname" class="form-control" value="${oldRname}">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2">
                          <br>
                        </td>
                      </tr>

                      <tr>
                        <td>
                          邮箱:
                        </td>
                        <td>
                          <input id="order_email" name="Email" class="form-control" value="${oldEmail}">
                        </td>
                      </tr>
                    </table>
                  </form>
                </div>
              </td>

            </tr>

          </table>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="order_send" >提交订单</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div>


<%@include file="inc/_footer.jsp"%>
<%@include file="inc/_toTop.jsp"%>
</body>
</html>
